<template>
	<view class="sort">
		<cu-custom bgColor="bg-topic-theme" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">{{type.name}}</block>
		</cu-custom>
		<!-- tab栏切换-begin -->
<!-- 		<scroll-view scroll-x class="nav nav-liner" scroll-with-animation :scroll-left="scrollLeft">
			<view class="cu-item" :class="index==TabCur?'text-black':''" v-for="(item,index) in sortList" :key="index" @tap="tabSelect" :data-id="index">
				<view class="cu-bar justify-center">
					<view class="action sub-title">
						<text class="text-sm text-bold text-black" :class="index==TabCur?'text-focus':''">{{item.name}}</text>
						<text class="bg-topic-theme" :class="index==TabCur?'isFocus':'foucus-no'" style="width:3rem"></text>
						
					</view>
				</view>
			</view>
		</scroll-view> -->
		<scroll-view scroll-x class="bg-white nav" :style="{position:'fixed',zIndex:'99',top:custombar+'px'}" scroll-with-animation :scroll-left="scrollLeft">
			<view class="cu-item" :class="index==TabCur?'text-green cur':''" v-for="(item,index) in detailList" :key="index" @tap="tabSelect" :data-id="index">
				{{item.name}}
			</view>
		</scroll-view>
		<!-- tab栏切换-end -->
		<view class="goods" :style="{marginLeft:'-'+TabCur*100+'vw',width:sortList.length*100+'vw'}">
			<view class="good" v-for="(item,index) in detailList" :key="index">
				<Goods @clickHref="hrefstoreDetail"></Goods>
			</view>
		</view>
	</view>
</template>

<script>
	import Goods from "@/components/goods.vue"
	export default{
		components:{
			Goods
		},
		data(){
			return{
				TabCur: 0,
				scrollLeft: 0,
				type:null,
				custombar:this.CustomBar,
				sortList:[{
						id:1,
						name:'最新上架',
						code:'newest'
					},
					{
						id:2,
						name:'猜你喜欢',
						code:'like'
					},
					{
						id:3,
						name:'低价秒杀',
						code:'cheap'
					},
					{
						id:4,
						name:'大家都看',
						code:'everbody'
					}
				],
				detailList:[
					{
						id:1,
						name:"水族用品"
					},
					{
						id:2,
						name:"宠物营养"
					},
					{
						id:3,
						name:"宠物玩具"
					},
					{
						id:4,
						name:"餐具"
					},
					{
						id:5,
						name:"收纳用品"
					},
					{
						id:6,
						name:"钟表"
					},
				]
			}
		},
		onLoad(option) {
			this.type = JSON.parse(decodeURIComponent(option.item))
			console.log(this.type)
			// this.isOwner = option.isOwner
			let that = this
			
			// 初始化towerSwiper 传已有的数组名即可
		},
		methods:{
			//tab栏切换事件
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			hrefstoreDetail(item){
				uni.navigateTo({
					url:"storeDetail?item=" + encodeURIComponent(JSON.stringify(item))
				})
			}
		},
		
	}
</script>

<style lang="scss" scoped>
	.sort{
		min-height: 100vh;
		background-color: #EEEEEE;
		overflow-x: hidden;
		.goods{
			display: flex;
			position: relative;
			margin-left: 0;
			transition: .5s all;
			margin-top: 90rpx;
			.good{
				flex: 1;
			}
		}
	}
</style>
